<template>
  <a-modal
    :centered="true"
    :confirmLoading="confirmLoading"
    :title="title"
    :visible="visible"
    :width="modalWidth()"
    @cancel="handleCancel"
    class="update-modal"
  >
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        取消
      </a-button>
      <a-button key="submit" type="primary" @click="handleSubmit">
        确定
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          label="名称">
          <a-input
            v-decorator="['title', {rules: [{required: true, message: '请输入名称!'}]}]"
            placeholder="请输入名称" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          label="中文名"
        >
          <a-input
            v-decorator="['appName', {rules: [{required: false, message: '请输入中文名!'}]}]"
            placeholder="请输入中文名" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          label="注册方式">
          <a-radio-group
            :value="addressType"
            @change="(v)=>this.addressType = v.target.value">
            <a-radio :value="0">自动注册</a-radio>
            <a-radio :value="1">手动录入</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          label="机器地址"
        >
          <a-input
            :disabled="inputDisabled"
            v-decorator="['addressList', {rules: [{required: false, message: '请输入机器地址!'}]}]"
            placeholder="请输入机器地址" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          label="排序"
        >
          <a-input
            v-decorator="['order', {rules: [{required: false, message: '请输入排序!'}]}]"
            placeholder="请输入排序" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { register } from '@/utils/drag_modal'
import { executorManagementSave, executorManagementUpdate } from '@/api/modular/main/knowl/executor/executorManagement'

export default {
  data() {
    return {
      inputDisabled: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 }
      },
      centerLabelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      centerWrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      addressType: 0,
      visible: false,
      title: '',
      id: undefined,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  watch: {
    addressType: {
      handler(value, old) {
        this.inputDisabled = value === 0
      }
    }
  },
  methods: {
    modalWidth() {
      return document.body.clientWidth * 0.5
    },
    // 初始化方法
    add() {
      this.id = undefined
      this.title = '新增执行器'
      this.visible = true
      this.addressType = 0
      register(true)
    },
    // 编辑
    edit(item) {
      this.id = item.id
      this.title = '编辑执行器'
      this.visible = true
      register(true)
      this.$nextTick(() => {
        this.form.setFieldsValue(
          {
            title: item.title,
            appName: item.appName,
            addressList: item.addressList,
            order: item.order
          }
        )
      })
      this.addressType = item.addressType
      this.inputDisabled = item.addressType === 0
    },
    addItem(values) {
      this.confirmLoading = true
      values['addressType'] = this.addressType
      executorManagementSave(values).then((res) => {
        if (res.code === 200) {
          this.$message.success('新增成功')
          this.confirmLoading = false
          this.$emit('ok', values)
          this.handleCancel()
        } else {
          const msg = res['msg'] || '操作失败,请联系管理员'
          this.$message.error(msg)
        }
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    editItem(values) {
      values['id'] = this.id
      values['addressType'] = this.addressType
      this.confirmLoading = true
      executorManagementUpdate(values).then((res) => {
        if (res.code === 200) {
          this.$message.success('编辑成功')
          this.confirmLoading = false
          this.$emit('ok', values)
          this.handleCancel()
        } else {
          const msg = res['msg'] || '操作失败,请联系管理员'
          this.$message.error(msg)
        }
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    /**
     * 提交表单
     */
    handleSubmit() {
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
        if (!errors) {
          for (const key in values) {
            if (typeof (values[key]) === 'object') {
              values[key] = JSON.stringify(values[key])
            }
          }
          if (this.addressType !== 0 && !values['addressList']) {
            this.$message.error('注册地址不能为空!')
            return
          }
          if (this.id) {
            this.editItem(values)
          } else {
            this.addItem(values)
          }
        }
      })
    },
    handleCancel() {
      register(false)
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>
